<template>
	<view class="uni-bg-white radius-8">
		<template v-for="(item,i) in inputList" :key="i">
			<TextInput
				v-if="item.type===1"
				:key="`text_${i}`"
				v-model="item.content"
				:placeholder="placeholder"
				:sort="i"
				:isLast="i===inputList.length-1"
				@onActionClick="onActionClick"
			/>
			<ImageInput
				v-else-if="item.type===2"
				:key="`image_${i}`"
				v-model="item.content"
				:sort="i"
				:top="item.top"
				:isLast="i===inputList.length-1"
				@onActionClick="onActionClick"
			/>
			<VideoInput
				v-else-if="item.type===3"
				:key="`video_${i}`"
				v-model="item.content"
				:sort="i"
				:top="item.top"
				:isLast="i===inputList.length-1"
				@onActionClick="onActionClick"
			/>
		</template>
		<view v-if="inputList.length === 0" class="mb-16">
			<textarea
				class="text-color-regular w-full fs-14"
				placeholder-style="color:#A5A7A9;"
				:placeholder="placeholder"
				:maxlength="-1"
				:auto-height="true"
				v-model="defaultText"
				@blur="onBlur"
			/>
		</view>
		<view class="flex justify-between">
			<view class="flex-col item-center" @click="addImageInput()">
				<view class="size-32 flex center uni-radius-circle mb-4" style="background-color:#D9FFEA;">
					<image class="size-16" src="@/static/svg/publish/image.svg"></image>
				</view>
				<text class="text-color-hint">图片</text>
			</view>
			<view class="flex-col item-center" @click="addVideoInput()">
				<view class="size-32 flex center uni-radius-circle mb-4" style="background-color:#FFE9B7;">
					<image class="size-16" src="@/static/svg/publish/video.svg"></image>
				</view>
				<text class="text-color-hint">视频</text>
			</view>
			<view class="flex-col item-center" @click="addTextInput()">
				<view class="size-32 flex center uni-radius-circle mb-4" style="background-color:#FFD4D4;">
					<image class="size-16" src="@/static/svg/publish/text.svg"></image>
				</view>
				<text class="text-color-hint">文字</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="radius-tl-8 radius-tr-8">
				<view class="mb-8 text-color-regular fs-14">
					<view class="flex center h-40 uni-bg-white" @click="onPopupItemClick(2)">向下添加图片</view>
					<view class="h-1 bg-default"></view>
					<view class="flex center h-40 uni-bg-white" @click="onPopupItemClick(3)">向下添加视频</view>
					<view class="h-1 bg-default"></view>
					<view class="flex center h-40 uni-bg-white" @click="onPopupItemClick(1)">向下添加文字</view>
				</view>
				<button @click="onClosePopup">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { nextTick, ref, unref, watch, watchEffect } from 'vue'
	import TextInput from './text-input.vue'
	import ImageInput from './image-input.vue'
	import VideoInput from './video-input.vue'
	import { uploadFileApi } from '@/api/common.js'
	
	const props = defineProps({
		placeholder: {
			type: String,
			default: '请输入'
		},
		// 上传图片用途:0-其他，1-用户/商户/商家相关，2-活动，3-商品，4-反馈，5-文章
		uploadFilePurpose: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: Array,
			default: []
		}
	})
	
	const emits = defineEmits(['update:modelValue'])
	
	const defaultText = ref('')
	
	const onBlur = (e) => {
		const text = unref(defaultText.value).trim()
		// console.log('onBlur', e, defaultText.value, text, text.length)
		if (text.length) {
			inputList.value.push({
				type: 1,
				content: text
			})
			defaultText.value = ''
		}
	}
	
	const inputList = ref(props.modelValue)
	const popup = ref(null)
	const selectedIndex = ref(0)
	
	const onActionClick = (action, data, index) => {
		// console.log('onActionClick', action, data, index, inputList.value)
		switch (action){
			case 'del':
				inputList.value.splice(index, 1)
				break
			case 'up':
				const prev = inputList.value[index-1]
				inputList.value[index-1] = inputList.value[index]
				inputList.value[index] = prev
				break
			case 'down':
				const next = inputList.value[index+1]
				inputList.value[index+1] = inputList.value[index]
				inputList.value[index] = next
				break
			case 'top':
				const item = inputList.value.splice(index, 1)
				inputList.value.unshift(unref(item[0]))
				break
			case 'add':
				selectedIndex.value = index
				popup.value.open()
				break
		}
	}
	
	const onPopupItemClick = (type) => {
		onClosePopup()
		// 向下添加
		const index = selectedIndex.value + 1
		switch (type) {
			case 2:
				addImageInput(index)
				break
			case 3:
				addVideoInput(index)
				break
			case 1:
				addTextInput(index)
				break
		}
	}
	
	const onClosePopup = () => {
		popup.value.close()
	}
	
	const addImageInput = (index) => {
		// console.log('addImageInput', index)
		uni.chooseMedia({
			// count: 1, // 要支持上传多张
			mediaType: ['image'],
			success: async ({tempFiles}) => {
				// console.log('选择图片', tempFiles)
				if (tempFiles.length > 0) {
					uni.showLoading({title: '上传中'})
					for (let i = 0; i < tempFiles.length; i++) {
						const file = tempFiles[i]
						const res = await uploadFileApi(props.uploadFilePurpose, {
							name: 'file',
							filePath: file.tempFilePath,
						})
						// console.log('上传结果', res)
						if (res.code === 200) {
							if (index !== undefined) {
								inputList.value.splice(index, 0, {
									type: 2,
									content: res.data
								})
							} else {
								inputList.value.push({
									type: 2,
									content: res.data
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					}
					uni.hideLoading()
				}
			}
		})
	}
	
	const addVideoInput = (index) => {
		// console.log('addVideoInput', index)
		uni.chooseMedia({
			count: 1,
			mediaType: ['video'],
			success: ({tempFiles}) => {
				// console.log('选择视频', tempFiles)
				if (tempFiles.length > 0) {
					uni.showLoading({title: '上传中'})
					const file = tempFiles[0]
					uploadFileApi(props.uploadFilePurpose, {
						name: 'file',
						filePath: file.tempFilePath,
					}).then(res => {
						uni.hideLoading()
						// console.log('上传结果', res)
						if (res.code === 200) {
							if (index !== undefined) {
								inputList.value.splice(index, 0, {
									type: 3,
									content: res.data
								})
							} else {
								inputList.value.push({
									type: 3,
									content: res.data
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					}).catch(() => uni.hideLoading())
				}
			}
		})
	}
	
	const addTextInput = (index) => {
		if (index !== undefined) {
			inputList.value.splice(index, 0, {
				type: 1,
			})
		} else {
			inputList.value.push({
				type: 1,
			})
		}
	}
	
	watchEffect(() => {
		console.log('watchEffect', props.modelValue)
		inputList.value = props.modelValue
	})
</script>
